<template>
    <div class="sidebar">
        <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            :collapse="collapse"
            unique-opened
            router
        >
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template #title>
                            <i :class="item.icon"></i>
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index.toString()" :key="item.index">
                        <i :class="item.icon"></i>
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
export default {
    setup() {
        const items = [
          {
            icon: "el-icon-lx-file",
            index: "/fileList",
            title: "我的文件",
          },

            {
                icon: "el-icon-lx-cascades",
                title: "配置",
                index: 1,
                subs: [
                    {
                        index: "/config",
                        title: "AI模型配置"
                    },
                    {
                        index: "/analysisConfig",
                        title: "数据统计配置",
                    },
                ]
            },

          {
            icon: "el-icon-coin",
            index: "/modelList",
            title:"机器学习模型",
          },

          {
            icon: "el-icon-takeaway-box",
            index: "/Deployment",
            title: "模型部署",
          },

          {
            icon: "el-icon-data-board",
            index: "/predictionAll",
            title: "预测结果",
          },

          {
            icon: "el-icon-pie-chart",
            index: "/analysis",
            title: "数据分析",
          },

            {
                icon: "el-icon-odometer",
                title: "流水线",
                index: 2,
                subs: [
                    {
                        index: "/mlPipeline",
                        title: "机器学习流水线"
                    },
                    {
                        index: "/analysisPipeline",
                        title: "数据分析流水线",
                    },
                ]
            },

            {
                icon: "el-icon-office-building",
                index: "/square",
                title: "数据广场",
            },

        ];

        const route = useRoute();

        const onRoutes = computed(() => {
            return route.path;
        });

        const store = useStore();
        const collapse = computed(() => store.state.collapse);

        return {
            items,
            onRoutes,
            collapse,
        };

    },
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
}
.sidebar > ul {
    height: 100%;
}
</style>
